<template>
  <el-card class="box-card">
    <div slot="header">
      <span>管理员管理</span>
      <el-button size="mini" type="primary" class="el-icon-plus" @click="addUserBtnFn" style="float: right">
        添加
      </el-button>
    </div>
    <!-- 表格 -->
    <div class="table_list">
      <el-table :data="tableData" style="width: 100%" :max-height="$store.state.tableHeight">
        <el-table-column prop="id" label="序号" type="index" width="100"></el-table-column>
        <!-- <el-table-column prop="id" label="ID" width="150"></el-table-column> -->
        <el-table-column prop="username" label="账号"></el-table-column>
        <el-table-column prop="password" label="密码">
          <!--   <template slot-scope="scope">
            <el-button
              class="view"
              type="text"
              @click.native.prevent="view(scope.$index)"
            >
              <i class="el-icon-view"></i>
            </el-button>

            {{ scope.row.password }}
          </template> -->
        </el-table-column>
        <!-- 权限 -->
        <el-table-column prop="limit" label="权限" :filters="[
          { text: '超级管理员', value: 0 },
          { text: '管理员', value: 1 },
        ]" :filter-method="filterLimit">
          <template v-slot="scope">
            <el-tag v-if="scope.row.role == 0">超级管理员</el-tag>
            <el-tag v-else type="success">管理员</el-tag>
          </template>
        </el-table-column>
        <!-- 状态 -->
        <el-table-column prop="limit" label="状态" :filters="[
          { text: '禁用', value: 0 },
          { text: '启用', value: 1 },
        ]" :filter-method="filterLimit">
          <template v-slot="scope">
            <el-tag v-if="scope.row.status == 0" type="danger">禁用</el-tag>
            <el-tag v-else type="success">启用</el-tag>
          </template>
        </el-table-column>
        <!-- 编辑 -->
        <el-table-column label="操作" align="">
          <template v-slot="scope">
            <el-button type="primary" icon="el-icon-edit" size="mini" @click="updateUserBtnFn(scope.row)"
              :disabled="scope.row.id === 3">编辑</el-button>
            <el-popconfirm confirm-button-text="好的" cancel-button-text="不用了" icon="el-icon-info" icon-color="red"
              title="这是一段内容确定删除吗？" @confirm="delUserBtnFn(scope.row.id)">
              <el-button type="danger" icon="el-icon-delete" size="mini" slot="reference"
                :disabled="scope.row.id === 3">删除</el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 弹出层 -->
    <el-dialog :title="isEdit ? '编辑账户' : '添加账户'" :visible.sync="dialogVisible" width="30%" :before-close="handleClose"
      @closed="onAddCloseFn">
      <div>
        <el-form :model="superUserForm" ref="userFormRef" label-width="100px" :rules="rules" class="demo-ruleForm">
          <el-form-item label="账号" prop="username" label-width="60px">
            <el-input v-model="superUserForm.username"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password" label-width="60px">
            <el-input v-model="superUserForm.password"></el-input>
          </el-form-item>
          <el-form-item label="权限" label-width="60px">
            <el-select v-model="superUserForm.role" placeholder="请选择权限">
              <el-option label="超级管理员" :value="0"></el-option>
              <el-option label="管理员" :value="1"></el-option>
            </el-select>
            <span class="tip">*默认管理员</span>
          </el-form-item>
          <el-form-item label="状态" label-width="60px">
            <el-select v-model="superUserForm.status" placeholder="请选择状态">
              <el-option label="禁用" :value="0"></el-option>
              <el-option label="启用" :value="1"></el-option>
            </el-select>
            <span class="tip">*默认启用</span>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmFn">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 分页 -->
    <Pagination class="page" :total="total" @pagination="handlePageChange" />
  </el-card>
</template>

<script>
import Pagination from "@/components/Pagination.vue";
import {
  getSupUserListAPI,
  uptSupUserAPI,
  delSupUserAPI,
  addSupUserAPI,
} from "@/api";
export default {
  name: "superUser",
  components: { Pagination },
  data() {
    return {
      // 分页
      total: 0,
      pagenum: 1,
      pagesize: 9,
      // 显示隐藏 table 重新渲染
      certinfoKey: false,
      dialogVisible: false,
      isEdit: false, //ture 编辑 false 新增
      editId: "", //编辑id
      tableData: [],
      superUserForm: {
        username: "",
        password: "",
        status: 1, //默认 启用
        role: 1, //0超级管理员 1管理员
      },
      rules: {
        username: [
          {
            required: true,
            message: "请输入名称",
            trigger: "blur",
          },
          {
            min: 5,
            max: 10,
            message: "长度在 5 到 10 个字符",
            trigger: "blur",
          },
        ],
        password: [
          {
            required: true,
            message: "请输入密码",
            trigger: "blur",
          },
          {
            min: 6,
            max: 10,
            message: "长度在 6 到 10 个字符",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    // 分页
    handlePageChange(obj) {
      console.log(obj);
      this.pagenum = obj.pagenum;
      this.pagesize = obj.pagesize;
      this.getListFn();
    },
    // 获取管理员列表
    getListFn() {
      getSupUserListAPI(this.pagenum, this.pagesize).then((res) => {
        console.log(res);
        if (res.status === 200) {
          this.tableData = res.data.data;
          this.total = res.data.total;
          // this.tableData.forEach((item) => {
          //   item.password_d = "******";
          // });
        }
      });
    },
    // 编辑 窗口
    updateUserBtnFn(obj) {
      console.log(obj);
      this.dialogVisible = true;
      this.isEdit = true;
      this.editId = obj.id;
      this.$nextTick(() => {
        //   数据回显  在打开修改对话框的时候 里面有数据
        this.superUserForm.username = obj.username;
        this.superUserForm.password = obj.password;
        this.superUserForm.status = obj.status;
        this.superUserForm.role = obj.role;
      });
      console.log(this.superUserForm);
    },
    // 添加 窗口
    addUserBtnFn() {
      this.dialogVisible = true;
      this.isEdit = false;
      this.editId = "";
    },
    // 编辑 添加 账户
    confirmFn() {
      console.log(this.superUserForm);
      this.$refs.userFormRef.validate(async (valid) => {
        if (valid) {
          if (this.isEdit) {
            // console.log(this.superUserForm);
            const res = await uptSupUserAPI({
              ...this.superUserForm,
              id: this.editId,
            });
            console.log(res);
            if (res.data.status === 0) {
              this.$message.success("更新管理员成功");
            } else {
              this.$message.error("更新管理员失败");
            }
            // this.getListFn();

            // const res = await uptSupUserAPI({ ...this.superUserForm, id: this.editId });
            // console.log(res);
          } else {
            console.log(this.superUserForm);
            // console.log(this.superUserForm);
            // 请求添加接口api
            // this.$axios({
            //   method: "POST",
            //   url: "http://localhost:3000/superuser",
            //   data: this.superUserForm,
            // });

            // addSupUserAPI(this.superUserForm).then((res) => {
            //   console.log(res);
            // });
            const res = await addSupUserAPI(this.superUserForm);
            console.log(res);
            if (res.data.status === 0) {
              this.$message.success("添加管理员成功");
            } else {
              this.$message.error(res.data.message);
            }
            // console.log(res);
            // this.getListFn();
          }
          this.getListFn();

          this.dialogVisible = false;
        } else {
          return false;
        }
      });
    },
    // 删除用户
    delUserBtnFn(id) {
      delSupUserAPI(id).then((res) => {
        console.log(res);
        if (res.data.status === 0) {
          this.$message.success("删除管理员成功");
        } else {
          this.$message.error("删除管理员失败");
        }
        this.getListFn();
      });
    },

    // 关闭弹出层
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => { });
    },
    // 弹窗关闭以后 重置表单
    onAddCloseFn() {
      this.$refs.userFormRef.resetFields();
    },

    // 点击查看密码
    /* view(index) {
      console.log(123);
      if (this.tableData[index].password_d === "******") {
        this.tableData[index].password_d = this.tableData[index].password;
      } else {
        this.tableData[index].password_d = "******";
      }
      // 显示隐藏密码 以后重新渲染表格
      this.certinfoKey = !this.certinfoKey;
    }, */

    // 权限筛选
    filterLimit(value, row, colum) {
      return row.status === value;
    },
  },
  mounted() {
    this.getListFn();
  },
};
</script>

<style scoped>
/* 小眼睛 */
.view {
  position: absolute;
  top: 7px;
  right: 20px;
}

.tip {
  color: #f56c6c;
  font-size: 12px;
  margin-left: 10px;
}
</style>
